import 'dart:async';

import 'package:course_control/app/modules/call/views/call_view.dart';
import 'package:course_control/app/modules/home/views/home_view.dart';
import 'package:course_control/app/modules/more/views/more_view.dart';
import 'package:course_control/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_utils/flutter_utils.dart';
import 'package:flutter_widgets/flutter_widgets.dart';
import 'package:from_css_color/from_css_color.dart';

import 'package:get/get.dart';

import '../../../../config/styles.dart';
import '../../../../widgets/backgroud_widget.dart';
import '../../../../widgets/wifi_widget.dart';
import '../controllers/tabbar_controller.dart';

class TabBarView extends GetView<TabbarController> {
  const TabBarView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BackgroundWidget(
        child: Column(
          children: [
            Row(
              children: [
                const Spacer(),
                Obx(() {
                  return Text('${controller.dateTimeStr.value} 高三1班（12-56）',
                      style: TextStyles.titleStyle);
                }),
                SizedBox(
                  width: 30.ratio,
                ),
                const WifiWidget(),
                SizedBox(
                  width: 20.ratio,
                )
              ],
            ),
            Expanded(
              child: PageView(
                physics: const NeverScrollableScrollPhysics(),
                controller: controller.pageController,
                children: const [HomeView(), CallView(), MoreView()],
              ),
            ),
            TabBar(
              controller: controller.tabController,
            )
          ],
        ),
      ),
    );
  }
}

class TabBar extends StatefulWidget {
  const TabBar({super.key, required this.controller});

  final StreamController controller;

  @override
  State<TabBar> createState() => _TabBarState();
}

class _TabBarState extends State<TabBar> {
  var currentIndex = 0;

  void onTap(int index) {
    widget.controller.sink.add(index);
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 92.ratio,
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          fromCssColor('#364C87').withOpacity(0.4),
          fromCssColor('#E3EFFF').withOpacity(0.1)
        ]),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(
            16.ratio,
          ),
          topRight: Radius.circular(16.ratio),
        ),
      ),
      child: Row(
        children: [
          SizedBox(
            width: 22.ratio,
          ),
          _buildItem(Assets.images.tabHome.path, '首页', 0),
          const Spacer(),
          _buildItem(Assets.images.iconPhone.path, '联系管理员', 1),
          SizedBox(
            width: 118.ratio,
          ),
          _buildItem(Assets.images.tabmore.path, '更多控制', 2),
          SizedBox(
            width: 60.ratio,
          )
        ],
      ),
    );
  }

  Widget _buildItem(String imgPath, String title, int index) {
    return InkWell(
      onTap: () => onTap(index),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          if (index == currentIndex)
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              height: 103.ratio,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [fromCssColor('#4ABCEB'), fromCssColor('#3166E1')],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(16.ratio),
                      topRight: Radius.circular(16.ratio)),
                ),
              ),
            ),
          SizedBox(
            width: 200.ratio,
            height: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CommonImage.asset(
                  imgPath,
                  width: 30.ratio,
                ),
                SizedBox(
                  width: 4.ratio,
                ),
                Text(
                  title,
                  style: TextStyles.titleStyle.copyWith(fontSize: 24.ratio),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
